<template>
	<view class="feedback-page">
		<!-- 顶部导航 -->
		<view class="header-bag">
			<!-- <view class="nav-back" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<text class="page-title">意见反馈</text> -->
			
			<!-- 切换标签 -->
			<view class="feedback-items">
				<view class="tab-item" :class="{ 'item-active': currentTab === 0 }" @click="switchTab(0)">
					意见反馈
				</view>
				<view class="tab-item" :class="{ 'item-active': currentTab === 1 }" @click="switchTab(1)">
					反馈历史
				</view>
			</view>
		</view>

		<!-- 意见反馈表单 -->
		<view v-if="currentTab === 0" class="feedback-data">
			<view class="feedback-section">
				<!-- 反馈类型 -->
				<view class="feedback-type">反馈类型</view>
				<view class="choose-type">
					<view class="type-item" 
						  v-for="(item, index) in feedbackTypes" 
						  :key="index"
						  :class="{ 'active-type': selectedType === item.value }"
						  :style="selectedType === item.value ? getActiveTypeStyle() : ''"
						  @click="selectType(item.value)">
						{{ item.label }}
					</view>
				</view>
				
				<!-- 反馈内容 -->
				<view class="feedback-type" style="border: none;">反馈内容</view>
				<view class="feed-content">
					<textarea 
						v-model="feedbackContent" 
						placeholder="请详细描述您遇到的问题或建议"
						maxlength="50"
						@input="onTextareaInput">
					</textarea>
					<text class="number-tip">{{ feedbackContent.length }}/500字</text>
				</view>
				
				<!-- 提交按钮 -->
				<view class="submit-feedback" @click="submitFeedback">
					提交
				</view>
				
				<!-- 客服信息 -->
				<view class="service">客服热线 : <text>010-65776071</text></view>
				<view class="service">(周一到周五9:00-18:00)</view>
			</view>
		</view>

		<!-- 反馈历史 -->
		<scroll-view v-if="currentTab === 1" class="history-container" scroll-y @scrolltolower="loadMoreHistory">
			<view class="history-list">
				<view 
					v-for="(item, index) in historyList" 
					:key="index"
					class="pre-feedback" 
					:class="{ 'feedback-read': item.is_read === 1 }"
					@click="viewFeedbackDetail(item)">
					<view class="feedback-header">
						<text class="feedback-type-text">{{ getTypeText(item.type) }}</text>
						<text class="feedback-time">{{ formatTime(item.created) }}</text>
					</view>
					<view class="feedback-content-text">
						{{ item.content }}
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view v-if="hasMoreHistory" class="more-loading">
				<text>上拉加载更多...</text>
			</view>
			<view v-else-if="historyList.length > 0" class="no-more">
				<text>没有更多数据了</text>
			</view>
			<view v-else class="empty-history">
				<text>暂无反馈记录</text>
			</view>
		</scroll-view>

		<!-- 反馈详情弹窗 -->
		<u-modal 
			v-model="showDetailModal" 
			title="反馈详情"
			:show-cancel-button="false"
			:show-confirm-button="true"
			confirm-text="关闭"
			@confirm="closeDetailModal">
			<view class="detail-content" v-if="currentDetail">
				<view class="detail-section">
					<view class="detail-label">反馈类型</view>
					<view class="detail-value">{{ getTypeText(currentDetail.type) }}</view>
				</view>
				<view class="detail-section">
					<view class="detail-label">反馈内容</view>
					<view class="detail-value content-text">{{ currentDetail.content }}</view>
				</view>
				<view v-if="currentDetail.reply_content" class="detail-section">
					<view class="detail-label">{{ currentDetail.login_name || '客服' }}回复:</view>
					<view class="detail-value reply-text">{{ currentDetail.reply_content }}</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { systemApi } from '@/api/index.js'
import {
		inject
	} from 'vue'
export default {
	data() {
		return {
			serverAddress: inject('$serverAddress'),
			// 当前标签页 0-意见反馈 1-反馈历史
			currentTab: 0,
			// 反馈表单数据
			selectedType: '1',
			feedbackContent: '',
			// 反馈类型
			feedbackTypes: [
				{ value: '1', label: '功能建议' },
				{ value: '2', label: '购买遇到问题' },
				{ value: '3', label: '性能问题' },
				{ value: '99', label: '其他' }
			],
			// 历史记录
			historyList: [],
			currentPage: 1,
			hasMoreHistory: true,
			// 详情弹窗
			showDetailModal: false,
			currentDetail: null,
			// 背景图片地址
			activeTypeBgImage: 'img/icon-yxz-kuang@3x.png'
		}
	},
	onLoad() {
		this.loadHistoryList()
	},

	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 切换标签页
		switchTab(index) {
			this.currentTab = index
			if (index === 1 && this.historyList.length === 0) {
				this.loadHistoryList()
			}
		},

		// 选择反馈类型
		selectType(type) {
			this.selectedType = type
		},

		// 文本输入事件
		onTextareaInput(e) {
			this.feedbackContent = e.detail.value.substring(0, 500)
		},

		// 提交反馈
		async submitFeedback() {
			if (!this.selectedType) {
				uni.showToast({ title: '请选择反馈类型', icon: 'none' })
				return
			}
			if (!this.feedbackContent.trim()) {
				uni.showToast({ title: '请输入意见和建议！', icon: 'none' })
				return
			}

			try {
				uni.showLoading({ title: '提交中...' })
				const result = await systemApi.addFeedback({
					type: this.selectedType,
					content: this.feedbackContent
				})

				if (result.r === 0) {
					uni.showToast({ title: '提交成功', icon: 'success' })
					// 清空表单
					this.selectedType = '1'
					this.feedbackContent = ''
					// 刷新历史记录
					this.historyList = []
					this.currentPage = 1
					this.loadHistoryList()
				} else {
					uni.showToast({ title: result.msg || '提交失败', icon: 'none' })
				}
			} catch (error) {
				console.error('提交反馈失败:', error)
				uni.showToast({ title: '提交失败', icon: 'none' })
			} finally {
				uni.hideLoading()
			}
		},

		// 加载历史记录
		async loadHistoryList(refresh = false) {
			if (refresh) {
				this.currentPage = 1
				this.historyList = []
				this.hasMoreHistory = true
			}

			if (!this.hasMoreHistory) return

			try {
				const result = await systemApi.getFeedbackList({
					page: this.currentPage
				})

				if (result.r === 0 && result.data && result.data.fl) {
					if (result.data.fl.length === 0) {
						this.hasMoreHistory = false
						return
					}
					this.historyList.push(...result.data.fl)
					this.currentPage++
				} else {
					this.hasMoreHistory = false
				}
			} catch (error) {
				console.error('加载历史记录失败:', error)
				this.hasMoreHistory = false
			}
		},

		// 加载更多历史记录
		loadMoreHistory() {
			this.loadHistoryList()
		},

		// 查看反馈详情
		async viewFeedbackDetail(item) {
			try {
				// 标记为已读
				if (item.is_read === 0) {
					await systemApi.readFeedback({ id: item.id })
					item.is_read = 1
				}
				
				this.currentDetail = item
				this.showDetailModal = true
			} catch (error) {
				console.error('标记已读失败:', error)
				// 即使标记失败也显示详情
				this.currentDetail = item
				this.showDetailModal = true
			}
		},

		// 关闭详情弹窗
		closeDetailModal() {
			this.showDetailModal = false
			this.currentDetail = null
		},

		// 获取类型文本
		getTypeText(type) {
			const typeMap = {
				'1': '功能建议',
				'2': '购买遇到问题',
				'3': '性能问题',
				'99': '其他'
			}
			return typeMap[type] || '其他'
		},

		// 格式化时间
		formatTime(timestamp) {
			if (!timestamp) return ''
			const date = new Date(timestamp * 1000)
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			}).replace(/\//g, '-')
		},

		// 获取选中类型的样式
		getActiveTypeStyle() {
			return {
				background: `url('${this.serverAddress+this.activeTypeBgImage}') no-repeat center`,
				backgroundSize: 'contain',
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.feedback-page {
		background-color: #eeeeee;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header-bag {
		position: relative;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.nav-back {
			padding: 10rpx;
		}

		.page-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		.feedback-items {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 80rpx;
			background: white;
			display: flex;

			.tab-item {
				flex: 1;
				height: 80rpx;
				line-height: 76rpx;
				text-align: center;
				font-size: 30rpx;
				color: #4d4d4d;
				border-right: 2rpx solid #eeeeee;

				&:last-child {
					border-right: none;
				}

				&.item-active {
					border-bottom: 4rpx solid #ff2e00;
					color: #ff2e00;
				}
			}
		}
	}

	.feedback-data {
		background: white;
		height: 100%;
		// width: 100%;
		padding: 30rpx;
		margin-top: 35rpx;
		
		overflow: scroll;

		.feedback-section {
			width: 100%;
		}

		.feedback-type {
			height: 50rpx;
			border-bottom: 2rpx solid #e8e8e8;
			line-height: 50rpx;
			font-size: 30rpx;
			// margin-bottom: 30rpx;
		}

		.choose-type {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 30rpx;
			margin-top: 30rpx;
			gap: 10rpx;

			.type-item {
				width: 32.33%;
				height: 74rpx;
				float: left;
				text-align: center;
				line-height: 74rpx;
				
				background: #f9f9f9;
				font-size: 30rpx;
				

				&.active-type {
					// 样式通过JavaScript动态设置
				}
			}
		}

		.feed-content {
			width: 100%;
			height: 214rpx;
			position: relative;
			border: 2rpx solid #e8e8e8;
			background: #f9f9f9;
			border-radius: 20rpx;
			margin-bottom: 98rpx;

			textarea {
				width: 100%;
				height: 100%;
				border: none;
				padding: 20rpx;
				background: #f9f9f9;
				border-radius: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #333;
			}

			.number-tip {
				color: #959595;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				font-size: 26rpx;
			}
		}

		.submit-feedback {
			width: 100%;
			height: 90rpx;
			color: white;
			text-align: center;
			background: #ff2e00;
			line-height: 90rpx;
			border-radius: 20rpx;
			margin-bottom: 210rpx;
			font-size: 34rpx;
		}

		.service {
			text-align: center;
			width: 100%;
			font-size: 30rpx;
			margin-bottom: 10rpx;

			text {
				color: #ff2e00;
			}
		}
	}

	.history-container {
		// position: absolute;
		margin-top: 35rpx;
		left: 0;
		width: 100%;
		top: 206rpx;
		bottom: 0;
		padding: 0 30rpx;
		height:100%;
		background: white;

		.pre-feedback {
			width: 100%;
			height: 130rpx;
			padding: 10rpx 0;
			border-bottom: 2rpx solid #e8e8e8;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 28rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background: #ccc;
			}

			&.feedback-read:before {
				background: #ff2e00;
			}

			.feedback-header {
				height: 54rpx;
				line-height: 54rpx;
				padding-left: 36rpx;
				display: flex;
				justify-content: space-between;

				.feedback-type-text {
					font-size: 28rpx;
					color: #333;
				}

				.feedback-time {
					color: #8d8d8d;
					font-size: 20rpx;
				}
			}

			.feedback-content-text {
				color: #8d8d8d;
				padding-left: 36rpx;
				padding-right: 60rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.more-loading, .no-more, .empty-history {
			text-align: center;
			padding: 40rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}

	.detail-content {
		padding: 40rpx 0;

		.detail-section {
			margin-bottom: 30rpx;

			.detail-label {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 10rpx;
			}

			.detail-value {
				font-size: 28rpx;
				color: #333;
				line-height: 1.5;

				&.content-text {
					padding: 20rpx;
					background: #f9f9f9;
					border-radius: 10rpx;
				}

				&.reply-text {
					padding: 20rpx;
					background: #e8f5e8;
					border-radius: 10rpx;
					color: #2d7d2d;
				}
			}
		}
	}
</style>